<template>
    <div>
        <div class="g-bd-box-w">
            <div style="height: 46px;" class="hdWraper">
                <div class="m-hd">
                    <div class="m-topBar">
                        <div class="bd">
                            <div class="row flex">
                                <router-link to="/" >
                                <div class="u-icon u-icon-hd-home"></div>
                                </router-link>

                                <router-link to="/" >
                                    <i class="logo u-icon u-icon-hd-logo"></i>
                                </router-link>
                                <a href="/" class="text"></a>
                                <div class="right">
                                    <a class="search" href="/search">
                                        <i class="u-icon u-icon-hd-search1"></i>
                                    </a>
                                    <a class="cart" href="/cart">
                                        <i class="u-icon u-icon-hd-cart"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: "netease",
}
</script>

<style lang="less" scoped>
.g-bd-box-w{
    background-color: white;
    height: 47px;
 
}
.m-topBar {
    position: relative;
}
// 左边
.m-topBar .bd .row {
    z-index: 1;
    margin: auto;
    overflow: hidden;
    position: relative;
    padding: 0 0.34133rem 0 0.512rem;
    height: 1.87733rem;
    display: flex;
    justify-content: space-between;
}

.m-topBar .u-icon-hd-home {
    width: 25px;
    height: 25px;
    background: url(https://yanxuan.nosdn.127.net/static-union/167065622131d8e0.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
}

.m-topBar .bd .row .logo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

a {
    text-decoration: none;
    color: #444;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.u-icon {
    display: inline-block;

}
.m-topBar .u-icon-hd-logo {
    width: 60px;
    height: 30px;
    background: url(https://yanxuan.nosdn.127.net/static-union/16706563731bb87d.png) no-repeat;
    background-size: 100% 100%;

}
// 右边样式
.m-topBar .bd .row .right {
    margin-left: auto;
    margin-right: 0.10667rem;
}

.m-topBar .bd .row .search {
    margin-right: 0.42667rem;
}
.m-topBar .bd .row .search .u-icon-hd-search1 {
    position: relative;
    bottom: 0;
}
.m-topBar .u-icon-hd-search1 {
   width: 30px;
   height: 30px;
    background: url(https://yanxuan.nosdn.127.net/static-union/1670656531e7a4e1.png) no-repeat;
    background-size: 100% 100%;
}
.m-topBar .bd .row .cart .u-icon {
    position: relative;
}
.m-topBar .u-icon-hd-cart {
    width: 30px;
    height: 33px;
    background: url(https://yanxuan.nosdn.127.net/static-union/16706565316612e1.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;
}
</style>